<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <pre>
        共同点：都用到了setTimeout定时器，都是在指定时间间隔后执行函数，都是为了解决数据时时变化而时时请求导致性能差的问题

        区别：防抖在指定时间间隔里再次调用函数，会清除定时器，重新计时，直到在最新的计时时间间隔里没有调用函数，才会执行定时器里的函数。而节流会在指定时间间隔后会执行一次函数，不会清除定时器而重新计时

        防抖缺点：当用户在指定时间间隔里一直操作，那么setTimeout里的函数永远不会执行

        节流缺点：如果用户一直操作，那么setimeout里的函数会在指定时间间隔后都会执行一次，如此反复

        以监听input的值举例：

        // 防抖
        var input = document.getElementById('input')
        input.addEventListener('input', debounce(handle, 1000))
        function debounce(fn,delay){
            var timer
            return function(...args){
                if(timer){
                    clearTimeout(timer)
                }
                timer = setTimeout(()=>{
                    fn.apply(this,args)
                }, delay)
            }
        }
        function handle(e){
            console.log(e.target.value)
        }

        
        // 节流
        var input = document.getElementById('input')
        input.addEventListener('input', throttle(handle, 200))
        function throttle(fn,delay){
            let timer
            let flag = true
            return function(...args){
                if(!flag){
                    return
                }
                flag = false
                timer = setTimeout(()=>{
                    fn.apply(this,args)
                    flag = true
                },delay)
            }
        }
        function handle(e){
            console.log(e.target.value)
        } 
 
    </pre>
<button onclick="test()">测试</button>
<script>

    // 防抖

    let debounceFn = debounce(output,1000)

    function test(){
        debounceFn()
    } 
    
    function output(){
        console.log(new Date().toLocaleTimeString())
    }

    function debounce(fn,wait){
        let timer
        return function (...args){
            if (timer){
                clearTimeout(timer)
                timer = null
            }
            timer = setTimeout(()=>{
                fn.apply(this,args) 
            },wait)
            
        }
    }

</script>
</body>
</html>